<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>fit-start 课件</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="${ctx.resource}/css/vendor/sm.min.new.css">
    <link rel="stylesheet" href="${ctx.resource}/css/courseware.css">

  </head>
  <body>
    <div class="page-group">
     
      <div class="page page-current courseware" id="homepage">
        <header class="bar bar-nav">
          <h1 class="title">训练计划</h1>
        </header>
        <div class="content" style="margin-bottom: 2.5rem;">
          <c:if test="${not empty batchCourseware.courseRound.student.tagIds}">
            <c:set var="tags" value="${persist.listCoursewareTags(batchCourseware.courseRound.student.arrayTagIds)}"></c:set>
          </c:if>
          <div class="list-block diet-wrap">
            <ul>
              <li class="item-content scope-diet">
                <div class="item-inner">
                  <div class="item-title">饮食大范围</div>
                  <div class="item-after">
                    <a href="#BREAKFAST" class="diet-icon active"><i class="icon breakfast"></i></a>
                    <a href="#LUNCH" class="diet-icon "><i class="icon lunch"></i></a>
                    <a href="#DINNER" class="diet-icon "><i class="icon dinner"></i></a>
                  </div>
                </div>
              </li>
              <c:if test="${not empty tags}">
                <li class="item-content">
                   <a href="#tags">
                     <div class="item-inner">
                       <div class="item-title">小贴士</div>
                       <div class="item-after">"当减脂遇到这些情况，必看！"</div>
                     </div>
                   </a>
                 </li>
              </c:if>
              <c:if test="${not empty batchCourseware.coachTips}">
                <li class="item-content">
                  <a href="#tips" style="display:block; width: 100%; text-align: center;">教练叮嘱</a>
                </li>
              </c:if>
            </ul>
          </div>
      
          <div class="content-block-title">本周解锁</div>
          <div class="week list-block no-margin" style="margin-top: 0;">
            <ul>
              <c:forEach var="dailyCourseware" items="${batchCourseware.dailyCoursewares}">
                <li class="item-content active">
                  <c:choose>
                    <c:when test="${not empty dailyCourseware.type and dailyCourseware.type.rest}">
                      <a href="javascript:void(0);" class="item-inner external">
                        <div class="item-title">${dailyCourseware.name}</div>
                        <div class="item-after">今日休息</div>
                      </a>
                    </c:when>
                    <c:otherwise>
                      <a href="${ctx.host}/profile/courses/${batchCourseware.courseRound.id}/weekly-coursewares/${batchCourseware.id}/daily-coursewares/${dailyCourseware.id}" class="item-inner external">
                        <div class="item-title">${dailyCourseware.name}</div>
                      </a>
                    </c:otherwise>
                  </c:choose>
                </li>
              </c:forEach>
            </ul>
          </div>
        </div>
        <nav class="bar bar-footer product-detail-footer">
          <a href="${ctx.host}/profile/courses/${courseId}" class="external button button-yellow train-button external" style="top: 0;">返回我的课程</a>
        </nav>
      </div>
      <c:forEach var="dietary" items="${batchCourseware.dietaryPrograms}">
        <c:if test="${dietary.key != 'SNACK'}">
        <div class="page breakfast-page" id="${dietary.key}">
          <header class="bar bar-nav">
            <a class="button button-link pull-left back" href="#">
              返回
            </a>
            <h1 class="title">${dietary.key}</h1>
          </header>
          <div class="content">
            <h1 class="body-title no-margin">${dietary.value.name}</h1>
            <div class="main-body">
              <%-- <img src="${ctx.resource}/image/diet.jpg" alt="foot" style="width: 100%; margin-bottom: .75rem;"> --%>
              <p>${dietary.value.description}</p>
            </div>
            <c:if test="${not empty dietary.value.snacks}">
              <c:set value="${persist.dietaryProgram(dietary.value.snacks) }" var="snack"></c:set>
              <h1 class="body-title no-margin">加餐：${snack.name}</h1>
              <div class="main-body">
                <p>${snack.description}</p>
              </div> 
            </c:if>
            <a href="#" class="button button-yellow train-button back" style="margin: 3rem 1rem 0 1rem;">GOT IT</a>
          </div>
        </div> 
        </c:if>
      </c:forEach>
       
      <div class="page breakfast-page" id="tags">
        <header class="bar bar-nav">
          <a class="button button-link pull-left back" href="#">
            返回
          </a>
          <h1 class="title">小贴士</h1>
        </header>
        <div class="content">
          <c:forEach var="tag" items="${tags}">
            <h1 class="body-title no-margin">${tag.name}</h1>
            <div class="main-body">
            <img src="${cloud.prod}/${tag.fitnessTag.cover}" alt="foot" style="width: 100%; margin-bottom: .75rem;">
            <p>${tag.description}</p>
          </div>
          </c:forEach>
          <a href="#" class="button button-yellow train-button back">GOT IT</a>
        </div>
      </div>
      <c:if test="${not empty batchCourseware.coachTips}">
        <div class="page breakfast-page" id="tips">
          <header class="bar bar-nav">
            <a class="button button-link pull-left back" href="#">
              返回
            </a>
            <h1 class="title">教练叮嘱</h1>
          </header>
          <div class="content">
            <h1 class="body-title no-margin">健身时，切记注意以下事项</h1>
            <div class="main-body">
              <%-- <img src="${ctx.resource}/image/diet.jpg" alt="foot" style="width: 100%; margin-bottom: .75rem;"> --%>
              <p>${batchCourseware.coachTips}</p>
            </div>
            <a href="#" class="button button-yellow train-button back">GOT IT</a>
          </div>
        </div>
      </c:if>
    </div>
    <script type="text/javascript" src="${ctx.resource}/js/vendor/zepto.js"></script>
    <script type="text/javascript" src="${ctx.resource}/js/vendor/sm-new.js"></script>
    <script type="text/javascript" src="${ctx.resource}/js/vendor/sm-extend-new.js"></script>
    <script type="text/javascript" src="http://cdn.webfont.youziku.com/wwwroot/js/wf/youziku.api.min.js"></script>
    <script type="text/javascript">
      $youziku.load("body,p,span,a.div", "322f173b999b41e7872896f97e98cbe6", "Source-Han-Normal");
      $youziku.draw();
      
      $(document).on("click", ".scope-diet .diet-icon", function() {
          $(".scope-diet .diet-icon").removeClass("active");
          $(this).addClass("active");
      })
    </script>
  </body>
</html>